<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%" >
      <el-table-column
        prop="file"
        label="工具类"
        min-width="180"
        align="center" >
        <template slot-scope="scope">
          <div v-if="scope.row.type==='util'" class="item-title">
            <p class="fc-blue fs-20" >util 常用工具类</p>
            <p  class="fc-blue" >使用方法：</p>
            <p >1、在vue实例中调用：this.$t</p>
            <p >2、import引用: import util from '@/libs/util' </p>
          </div>
          <div v-if="scope.row.type==='cookie'" class="item-title">
            <p class="fc-blue fs-20" >cookie 工具类</p>
            <p  class="fc-blue" >使用方法：</p>
            <p >1、import引用: import cookie from '@/libs/cookie' </p>
          </div>
          <div v-if="scope.row.type==='validate'"  class="item-title">
            <p class="fc-blue fs-20" >validate 表单验证类</p>
            <p  class="fc-blue" >使用方法：</p>
            <p >1、import引用: import {getCookie,setCookie,getCookie} from '@/libs/validate' </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="methods"
        label="方法名称"
        min-width="180"
        align="center" >
        <template slot-scope="scope">
          <span class="fun-name">{{ scope.row.methods }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="方法备注"
        min-width="180"
        align="center" >
      </el-table-column>
      <el-table-column
        prop="params"
        label="参数说明"
        min-width="180"
        align="center" >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import util from '@/libs/util'
  export default{
    methods:{
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          //工具类
          if (rowIndex  === 0) {
            return {
              rowspan: this.utilCount,
              colspan: 1
            };
          }
          else if(rowIndex<this.utilCount){
            return {
              rowspan: 0,
              colspan: 0
            };
          }
          //cookie工具类
          else if(rowIndex === this.utilCount){
            return {
              rowspan: this.cookieCount,
              colspan: 1
            };
          }else if(rowIndex< (this.utilCount + this.cookieCount)){
            return {
              rowspan: 0,
              colspan: 0
            };
          }
          //validate工具类
          else if(rowIndex === this.utilCount + this.cookieCount){
            return {
              rowspan: this.validateCount,
              colspan: 1
            };
          }else if(rowIndex< (this.utilCount + this.cookieCount + this.validateCount)){
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },
    data(){
      return{
        utilCount:10,
        cookieCount:3,
        validateCount:2,
        tableData:[
          {
            type:'util',
            methods:"getUUID(len, radix)",
            remark:'产生一个唯一的uuid',
            params:"len 产生的字符串长度、radix 进制数"
          },{
            type:'util',
            methods:"dateFormat(dateStr, fmt)",
            remark:'日期格式化',
            params:"dateStr 要格式化的日期、fmt 时间格式"
          },{
            type:'util',
            methods:"formatDate(timeStamp, fmt)",
            remark:'时间戳格式化',
            params:"timeStamp 时间戳、fmt 时间格式"
          },{
            type:'util',
            methods:"getQueryParams(paramName)",
            remark:'history模式下获取url中的参数',
            params:"paramName url中所要提取的参数名"
          },{
            type:'util',
            methods:"getUrlParams(paramName)",
            remark:'hash模式下获取url中的参数',
            params:"paramName url中所要提取的参数名"
          },{
            type:'util',
            methods:"clearLoginInfo()",
            remark:'清除登录信息',
            params:"-"
          },{
            type:'util',
            methods:"getLocalStorageItem(key)",
            remark:'获取前端数组缓存',
            params:"key 缓存键值"
          },{
            type:'util',
            methods:"setLocalStorageItem(key, data)",
            remark:'设置前端数组缓存',
            params:"key 缓存键值、data缓存数组"
          },{
            type:'util',
            methods:"getDictValue(dict,value)",
            remark:'字典值转义',
            params:"dict 字典数组、value 要转义的值"
          },{
            type:'util',
            methods:"renderColor(index,text)",
            remark:'文本颜色渲染',
            params:"index 颜色数组下标、text 要渲染的文本"
          },{
            type:'cookie',
            methods:"getCookie(name)",
            remark:'从cookie获取值',
            params:"name cookie键"
          },{
            type:'cookie',
            methods:"setCookie(name,value)",
            remark:'修改cookie中的值',
            params:"name cookie键、value cookie值"
          },{
            type:'cookie',
            methods:"removeCookie(name)",
            remark:'从cookie中移除值',
            params:"name cookie键"
          },{
            type:'validate',
            methods:"mobile()",
            remark:'验证手机号格式',
            params:"-"
          },{
            type:'validate',
            methods:"integer()",
            remark:'验证是否整数',
            params:"-"
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .item-title{
    padding: 20px;
    text-align: left;
  }
  .fc-blue{
    color: #2d8cf0;
  }
  .fun-name{
    color:#3182bd
  }

</style>
